<template>
	<div class="container">
		<header class="customHeaderStyle">
			<router-link to="/main/integral">
				<div class="go-back">
					<i></i>
					<i></i>
					<i></i>
				</div>
			</router-link>	
				<div class="headerCustomTitle">签到抽奖</div>
		</header>
		
		<div class="parent">
			<div style="height:3rem;"></div>
			<div class="sub_1">
				<div class="prize01">
					<img :src="bannerBg" alt="">
				</div>
				<div class="prize02">
					<p class="prize_p">{{detail.rewardTitle}}</p>
					<img src="static/image/prize/prize02.png" alt="">
				</div>
				
			</div>
			<div class="sub_2">
				<img class="prize03" :src="imgUrl" alt="" @click="tranform">
				<!-- <div class="prize03"  @click="tranform"> -->
				<div class="inner">
					<div class="model" v-for="(val, index) in 9" :key="index">
						<div class="sub" ></div>
						<img :src="index == 4 ? 'static/image/prize/btn01.png' : imgUrl_1" alt=""  :class="index == 4 ? 'select' : 'panel'"  @click=" index == 4 ? getGift(index) : ''" ref="change" :data-rid="fk(index,0)">
						<div class="tip" v-if="index !== 4" :data-rid="fk(index,0)">
							<img :src="fk(index, 1)" alt="">
							<p>{{fk(index, 2)}}</p>
						</div>
					</div>
					
				</div>
			</div>
			<div class="sub_3">
				<p @click="model=true;model_rewardDesc=true;">抽奖规则</p>
			</div>
		</div>
		<div class="rule_model" @click="model=false;model_span=false;model_rewardDesc=false;" v-if="model">
			<div class="rule_model_1" v-if="model_rewardDesc">
				<article v-html="detail.rewardDesc">
					<!-- {{}} -->
				</article>
			</div>
			<div class="rule_model_2" v-if="model_span">
					<span class="model_span_1">恭喜你！</span>
					<img  :src="prizeItem.rewadImg" alt="">
					<span class="model_span_2">{{prizeItem.itemName}}</span>
					<span class="model_span_4">确定</span>
			</div>
			
		</div>
	</div>
	
</template>
<script>
	import {
		getRewardRuleAndDetailForHome,//获取抽奖规则及详情讯息
		getRandomRewardItem,//提交某用户抽奖记录
		getSignRewardToday,
		getUserIntegral,
		getTodayRewardResultDetailForHome,//查询是否可以抽奖
		} from '../../api/wxh/getData.js'
	import {Toast} from '../../utils/toast.js'
	export default {
		data(){
			return {
				imgUrl: 'static/image/prize/bg01.png',
				imgUrl_1: 'static/image/prize/bg03.png',
				bannerBg: 'static/image/prize/prize01.png',
				flag: true,
				i: 0,
				j: '',
				k: 0,
				time: 100,
				detail: '',
				rewadImg: '',
				prizeId: '',
				model: false,
				model_rewardDesc: false,
				model_span: false,
				prizeItem: '',
				Rid:'',
			}
		},
		async created(){
			
			let req =  await getRewardRuleAndDetailForHome('rewardCode='+this.$route.query.rewardCode);
			if(req.returnCode == 1){ 
				this.detail = req.data[0];
				this.bannerBg = this.detail.bannerImg;
			}
		},
		computed:{
			// b: function(){
			// 	let c = this.detail.rewardItemList;
			// 	console.log('c', c);
			// 	return c.splice(3,0,'');
			// }
		},
		methods: {
			async getGift(index){
				let req = await getTodayRewardResultDetailForHome('rewardCode='+this.$route.query.rewardCode);
				if(req.returnCode === 1 && req.data){
					if(req.data[0].remainRewardAccount === 0) {
						Toast({
								message: req.data[0].remainRewardMsg,
							  type: 'warn',
							  duration: window.api.alertTime_2
						})
						return
					}
				}
				
				let res = await getRandomRewardItem("rewardId="+this.detail.rid+"&signDetailId="+this.$route.query.rid);
				if(res.returnCode == 0){
					Toast({
						message: res.msg,
					  type: 'warn',
					  duration: window.api.alertTime_2
					})
					return
				}
				this.prizeId = res.data[0].rid;
				this.prizeItem = res.data[0]; 
				this.getRid();
				this.tranform(index);
			},
			tranform(index){
				if(index != 4){return}
				let arr = ['static/image/prize/bg01.png', 'static/image/prize/bg02.png'];
				if(!this.flag){return false};
				setInterval(()=> {
					this.imgUrl = this.imgUrl == arr[0] ? arr[1] : arr[0];
				},300)
				this.flag =  false;
				this.bgChange();
			},
			bgChange(){
				let lock = false;
				this.i++;
				this.k++;
		
				if(this.k >= 16){
					this.time += 50;
				}

				
				switch(this.i){
					case 0:
						this.j = 0;
						break;
					case 1:
						this.j = 1;
						break;
					case 2:
						this.j = 2;
						break;		
					case 3:
						this.j = 5;
						break;
					case 4:
						this.j = 8;
						break;
					case 5:
						this.j = 7;
						break;
					case 6:
						this.j = 6;
						break;
					case 7:
						this.j = 3;
						break;
					case 8:
						this.j = 0;
						break;
					case 9:
						this.i = 0;
						this.j = 0;
						break;					
				}
				setTimeout(()=>{
						let a = this.$refs.change;
						for(let [ind, val] of a.entries()){
							
							if(ind == this.j){
								// val.style.display = 'block';
 								val.src = 'static/image/prize/bg04.png';
							} else if(ind == 4){
								val.src = 'static/image/prize/btn01.png';
							} else {
								// val.style.display = 'none';
								val.src = 'static/image/prize/bg03.png';
							}

							if(this.i == (this.Rid+1) && ind !== 4 && this.k>=16){
								lock = true;
								break
							}
						}
					
					if(lock){
						this.model = true;
						this.model_span = true;
						Promise.all([getSignRewardToday('signRuleId='+this.$route.query.rid), getUserIntegral()])
						return
					}
					this.bgChange();
					
				},this.time);
			},
			fk(index, type){
				let a;
				// console.log('b', this.b);
				// if(!this.b)return
				// console.log('b', b.splice(3,0,''));
				switch(index){
					case 0:
						a = 0;
						break;
					case 1:
						a = 1;
						break;
					case 2:
						a = 2;
						break;		
					case 3:
						a = 5;
						break;
					case 4:
						a = 8;
						break;
					case 5:
						a = 7;
						break;
					case 6:
						a = 6;
						break;
					case 7:
						a = 3;
						break;
					case 8:
						a = 0;
						break;
					case 9:
						a = 0;
						a = 0;
						break;					
				}
				// console.log('a',a);
				// console.log('b',b);
				
				if(type == 0){
					return index == 8 ? this.detail.rewardItemList[4].rid : this.detail.rewardItemList[index].rid

					// return this.b[a].rid
				}
				if(type == 1){
					return index == 8 ? this.detail.rewardItemList[4].rewadImg : this.detail.rewardItemList[index].rewadImg
					// return this.b[a].rewadImg
				}
				if(type == 2){
					return index == 8 ? this.detail.rewardItemList[4].itemName : this.detail.rewardItemList[index].itemName
					// return this.b[a].itemName
				}
			},
			getRid(){
				let a = this.$refs.change;
				for(let [ind, val] of a.entries()){
					if(val.dataset.rid == this.prizeId){
						this.Rid = ind;
					}
				}	
			}
		}
	}
</script>
<style scoped>
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
	.container {
		background: #ffff; 
		height: 100%;
		width: 100%;
	}
	.parent  .prize02,.prize03 {
		margin: auto;
		
	}
	.prize01 {
		/*background: url(../../../static/image/prize/prize01.png)  center no-repeat;
		background-size: 100% 100%;*/
		width: 100%;
		height: 13rem;

	}
	.prize_p {
		position: absolute;
		top: .6rem;
		left: .9rem;
		width: 100%;
		color: #fff;
	}
	.prize02 {
		width: 50%;
		position: absolute;
		left: 25%;
		top: 11rem;
	}
	.prize03 {
		width: 100%;
		height: 100%;
	}
	.parent {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background:#a8e6dd;
		/*background: -webkit-linear-gradient(#ffda39, #efad08);
	  background: -o-linear-gradient(#ffda39, #efad08);
	  background: -moz-linear-gradient(#ffda39, #efad08);
	  background: linear-gradient(#ffda39, #efad08);*/
	}
	.sub_1, .sub_2 {
		position: relative;
	}
	.sub_2 {
		width: 85%;
		margin:auto;
	}
	.sub_3 {
		text-align: left;
		padding-left: 2rem;
		margin-bottom: 1rem;
		
	}
	.sub_3 > p  {
		color: #4e95e3  !important;
	}
	.inner {
		position: absolute;
		top:6%;
		left:5%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	.model {
		width: 30%;
		height: 100%;
		margin-right:0.05rem;
		margin-bottom:0.05rem;
		position: relative;
	}
	.sub {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0,0,0,0.3);
		display: none;
		z-index: 999;
	}
	.inner img {
		width: 100%;
		height: 100%;
	}
	.tip {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 888;
		display: flex;
		flex-direction: column;
		justify-content: center;
		top: 0;
		left: 0;
		padding: .5rem;
	}
	.tip img {
		width: 80%;
		height: 60%;
		margin: auto;
	}
	.rule_model {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		color: #000;
		display: flex;
		justify-content: center;
	}
	.rule_model_1 {
		width: 80%;
		height: auto;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    white-space: wrap;
    word-break: break-all;
    min-height: 25%;
    text-align: left;
    padding: 1rem;
	}
	.rule_model_2 {
		width: 70%;
		height: 30%;
		background: url('../../../static/image/prize/model.png');
		background-repeat: no-repeat;
    background-size: 100% 100%;
		position: absolute;
		top: 50%;
    transform: translateY(-50%);	
    display: flex;
    flex-direction: column;
    justify-content: center;
	}

	.rule_model_2 span {
		display: block;
		height: 1.5rem;
	}
	.rule_model_2 img {
		width: 18%;
		height: 20%;
		margin: auto;
	}
	.model_span_1 {
		font-weight: 500;
		font-size:18px;
	}
	.model_span_2 {
		color: #fc2e2e;
	}
	.model_span_3 {
		color: #a29e9e;
	}
	.model_span_4 {
		color: #fff;
		line-height: 1.5rem;
	}
	.article {
		position: absolute;
		top: 50%;
		transform: translateY(-50%)
	}
</style>